<template>
  <div class="chat-input__header">
    <chat-models :isAgentNew="isAgentNew" />
    <rest-rights />
    <el-tooltip
      content="文件上传"
      placement="top"
      :offset="6"
      :open-delay="300"
    >
      <p>
        <svg-icon
          icon-class="upload-btn"
          class="fs-24"
          title="文件上传"
          @click="handleOpenFileclick"
          ref="refUploadIcon"
        ></svg-icon>
        <input
          type="file"
          style="display: none"
          ref="refUpload"
          @change="handleUploadFile"
          accept="application/pdf"
        />
      </p>
      <template slot="content">
        <div class="tooltip-content">文件上传</div>
      </template>
    </el-tooltip>
    <el-tooltip
      content="AI应用中心"
      placement="top"
      :offset="6"
      :open-delay="300"
    >
      <p>
        <svg-icon
          icon-class="ai-agent"
          class="fs-24"
          title="AI应用中心"
          @click="handleOpenAgentclick"
        ></svg-icon>
        <span v-if="!isAgentClick" class="agent-Hot">Hot</span>
      </p>
      <template slot="content">
        <div class="tooltip-content">AI应用中心</div>
      </template>
    </el-tooltip>

    <el-tooltip
      content="历史记录"
      placement="top"
      :offset="6"
      :open-delay="300"
    >
      <svg-icon
        icon-class="history-btn"
        class="fs-24 ml-a"
        title="历史记录"
        @click="handleOpenHistory"
      ></svg-icon>
      <template slot="content">
        <div class="tooltip-content">历史记录</div>
      </template>
    </el-tooltip>
    <el-tooltip
      content="新会话"
      placement="top"
      :offset="6"
      :open-delay="300"
    >
      <svg-icon
        icon-class="newchat-btn"
        class="fs-24 newchat-btn"
        title="新会话"
        @click="handleAddNewMessage"
      ></svg-icon>
      <template slot="content">
        <div class="tooltip-content">新会话</div>
      </template>
    </el-tooltip>
    <!-- <tours-chat-upload :target="() => $refs.refUploadIcon.getElement()" /> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import RestRights from '@/components/rest-rights/index.vue'
import ChatModels from './models.vue'
import { awaitNextick } from '@/utils/index'
// import { useHistoryStore } from '@/stores/history'
// const history = useHistoryStore()
import createChatDoc from '@/utils/chat-document'
import { getLocalStorage, setLocalStorage } from '@/utils/storage'
import PsMessage from '@/components/message/index'
const { handlePdfSummrize, detechRestRights } = createChatDoc()
// import toursChatUpload from '@/components/tours/tours-chat-upload.vue'

export default {
  name: 'InputHeader',
  inject: ['detectIsLogin', 'addNewMessage'],
  components: {
    ChatModels,
    RestRights
  },
  props: {
    rootNode: {
      type: Object,
      default: () => null
    },
    isAgentNew: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      isAgentClick: getLocalStorage('isAgentNew_click')
    }
  },
  computed: {
    ...mapGetters(['chatStore'])
  },
  methods: {
    detectIsChating () {
      const status = this.chatStore.status || this.chatStore.docSummarize.status
      if (['upload', 'analysis', 'chating', 'analysis'].includes(status)) {
        const message = '正在生成，请稍等！'
        PsMessage({ message })
        return true
      }
      return false
    },
    handleOpenFileclick () {
      if (!this.detectIsLogin()) return
      if (!detechRestRights('pdf')) return
      if (this.detectIsChating()) return
      this.$refs.refUpload.click()
    },
    async handleOpenAgentclick () {
      this.$xz('HtmlClickReport', { ReportID: 7618 })
      this.isAgentClick = true
      setLocalStorage('isAgentNew_click', true)

      this.$store.dispatch('chat/setChatStore', { prevConversionId: this.chatStore.conversionId || '' })
      await this.addNewMessage()
      this.$store.dispatch('agent/setAgentShow', true)
    },
    handleOpenHistory (e) {
      if (!this.detectIsLogin()) return
      this.$store.dispatch('history/setStatus', true)
    },

    async handleAddNewMessage () {
      if (this.rootNode === null && !this.chatStore.docSummarize.status && !this.chatStore.agent) return
      if (this.detectIsChating()) return
      this.$store.dispatch('agent/setAgentShow', false)
      await this.addNewMessage()
      // this.$PsMessage({ message: '创建成功，输入新问题' })
    },
    async handleUploadFile () {
      const files = this.$refs.refUpload.files
      if (!files) return
      if (files.length > 1) {
        this.$PsMessage({ message: '一次只能上传一个文件' })
        return
      }
      const file = files[0]
      if (file.type !== 'application/pdf') {
        this.$PsMessage({ message: '只支持上传PDF文件' })
        return
      }
      if (file.size > 20 * 1024 * 1024) {
        this.$PsMessage({ message: '文件大小不能超过20MB' })
        return
      }
      if (this.detectIsChating()) return
      await this.handleAddNewMessage()
      await awaitNextick(0.1)

      handlePdfSummrize(file)
      setTimeout(() => {
        this.$refs.refUpload.value = ''
      }, 200)
    }
  }
}

</script>

<style lang="scss" scoped>
.chat-input__header {
  // border-top: 1px solid $border-color-primary;
  padding: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  .btns {
    display: flex;
    align-items: center;
  }
  .split-line {
    height: 19px;
    width: 1px;
    background-color: $border-color-primary;
    margin-right: 10px;
  }
  .svg-icon {
    cursor: pointer;
    outline: none;
    color: #FFFFFF;
    --color-primary: #FFFFFF;
    --color-active: #FFFFFF;
    opacity: 0.7;
    flex: 0 0 auto;
    &:hover {
      opacity: 1;
    }
  }
  p {
    position: relative;
  }
  .agent-Hot {
    position: absolute;
    font-size: 12px;
    background: #E24C4C;;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 5px;
    top: -10px;
    left: 13px;
  }
  .newchat-btn {
    position: relative;
    top: -1px;
  }
}
:global(.tooltip-content) {
  white-space: nowrap;
}
.link-vip {
  color: $vip-color;
}
.btns-share {
  height: 22px;
}
.summarzie__tooltip {
  p {
    padding: 10px 24px;
    border-bottom: 1px solid $border-color-primary;
  }
  ul {
    padding: 10px 0;
  }
  li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    cursor: pointer;
    --color-primary: #{#{$font-color-main}};
    --color-active: #{#{$font-color-main}};
    color: $font-color-main;
    &:hover {
      background-color: $button-bg-color;
    }
  }
}
</style>
